<template>
<transition name="bounce" enter-active-class="bounceInUp" leave-active-class="bounceOutDown" @beforeEnter="bounceInStart">
  <div class="login-wrapper" style="backface-visibility: hidden;" :style="{backgroundImage:`url(${loginBgImage})`}">
    <v-header @back="clickBack = true">
      <p slot="right" @click="toRegister" style="font-size: 18px; font-weight: bold">{{$t('btn.register')}}</p>
    </v-header>

    <div class="titleLogin">
        <p>{{$t('btn.phoneLogin')}}</p>
    </div>

    <div class="form">
      <div class="around">
        <div><img :src="membersImage" alt=""></div>
        <input v-model="phone" pattern="[0-9]*" :placeholder="$t('placeholder.phone')" ref="phoneCount" style="color: white">
      </div>
      <div class="around">
        <div><img :src="lockImage" alt=""></div>
        <input type="password" v-model="password" :placeholder="$t('placeholder.pswd')" style="color: white">
      </div>
      <div class="around"  style="margin: 0 auto 25px auto;" :style="{backgroundColor:backgroundButtonColor}">
        <button class="btn" @click="login" :style="{backgroundColor:backgroundButtonColor, color: buttonColor}" :disabled="disabledButton">{{$t('btn.login')}}</button>
      </div>
    </div>

    <!-- 做过渡动画用 -->
    <transition name="bounce" enter-active-class="bounceInRight" leave-active-class="bounceOutLeft">
      <router-view></router-view>
    </transition>
  </div>
</transition>
</template>
<script>
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import VHeader from '@/components/v-header/v-header'
import nativeBridge from '@/assets/js/nativeBridge'
import md5 from 'js-md5'
import membersImage from '@/assets/img/myhome/members.png'
import loginBgImage from '@/assets/img/myhome/loginbg.jpg'
import lockImage from '@/assets/img/myhome/lock.png'

export default {
  data () {
    return {
      loginBgImage: loginBgImage,
      membersImage: membersImage,
      lockImage: lockImage,
      showThirdLogin: false,
      clickBack: false,
      phone: '',
      password: '',
      iosShow: true,
      disabledButton: true,
      backgroundButtonColor: '#D1D4DC',
      buttonColor: '#fff',
      allDisabledBack: true
    }
  },
  components: {
    VHeader
  },
  watch: {
    password: function() {
      if (this.phone !== '' && this.password !== '') {
        this.backgroundButtonColor = '#fff'
        this.buttonColor = '#00ceb9'
        this.disabledButton = false
      } else {
        this.backgroundButtonColor = '#D1D4DC'
        this.disabledButton = true
        this.buttonColor = '#fff'
      }
    },
    phone: function() {
      this.$refs.phoneCount.setAttribute('maxlength', 11)
      if (this.phone !== '' && this.password !== '') {
        this.backgroundButtonColor = '#fff'
        this.buttonColor = '#00ceb9'
        this.disabledButton = false
      } else {
        this.backgroundButtonColor = '#D1D4DC'
        this.disabledButton = true
        this.buttonColor = '#fff'
      }
    }
  },
  methods: {
    toRegister () {
      this.$router.push({
        path: '/login/register'
      })
    },
    bounceInStart () {
      this.showThirdLogin = true
    },
    login () {
      let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.phone === '') {
        this.$vux.toast.text(this.$t('toast.phoneNotNull'), 'middle')
        return
      }
      if (!reg.test(this.phone)) {
        this.$vux.toast.text(this.$t('toast.phoneNotCorrect'), 'middle')
        return
      }
      if (this.password === '') {
        this.$vux.toast.text(this.$t('toast.pswdNotNull'), 'middle')
        return
      }
      if (!(/^([\d]|[\w]){6,16}$/.test(this.password))) {
        this.$vux.toast.text(this.$t('toast.pswdRule'), 'middle')
        return
      }
      const _self = this
      axios.post(_self, '/v1/phoneLogin', {
        phone: _self.phone,
        password: _self.password
      }, (data) => {
        nativeBridge.setJPushAlias(data.id)
        data.password = md5(_self.password)
        localUser.set(data)
        _self.$router.go(-1)
        _self.$store.dispatch('initJIM')
        _self.$store.commit('SET_LOGIN_ANMATION', '')
      }, (err) => {
        if (err.code === '000001' || err.code === '000002') {
          this.$vux.toast.text('用户名或密码错误')
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.bounceInUp
.bounceOutDown
  animation-duration .8s
.login-wrapper {
  background-size: cover
  background-repeat: no-repeat
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;

.titleLogin {
      font-weight bold
      margin-top 20px
      width 100%
      text-align center
      color #ffffff
      font-size 24px
}
  .form {
    margin-top 20px
    .around {
      display flex
      border-radius: 23px;
      height: 45px;
      padding: 0 25px;
      width: 66%;
      margin: 0 auto 18px auto;
      box-shadow: 0 0 10px #d5d5d5;
      overflow: hidden;
      img {
            margin-top: 11px;
            margin-left: -6px;
            width: 18px;
            height: 21px;
      }
      input {
        margin-left: 12px;
        border: inherit;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-weight: 600;
        font-size: 15px;
        background-color: transparent;
        &:focus {
          outline: none
        }
      }
      .btn {
        font-size: 17px;
        width: 100%;
        height: 100%;
        border: none;
        background-color: #b9b9b9;
        &:focus {
          outline: none
        }
      }
    }
    .bottom {
      margin-top: -12px;
      text-align: right;
      width: 100%;
      font-size: 13px;
      p {
        color: white;
        font-size: 15px;
        text-align: right;
        padding-right: 42px;
      }
    }
  }
}

.myRorate, .myRorate-enter-active, .myRorate-leave-active {
  position: absolute;
  transition: transform .5s;
  transform-origin: right center;
}
.myRorate-enter, .myRorate-leave-to {
	transform: translateX(-100%)  rotateY(180deg) scale(0.6)
}

input::-webkit-input-placeholder {
    color: white;
}
</style>

